<template>
	<view class="community-wrapper wrapperLayer">
		<view class="topfixed-container colCen borderBox">
			<view class="topbarbox"></view>
			<view class="search-bar-container rowCen">
				<view class="lft-adrs-content rowCenCen" @tap="openAction()">
					<view class="adrs-txt">
						{{cityInfo.value}}
					</view>
					<image class="downIcon" src="../../static/images/community/down.png" mode=""></image>
				</view>

				<view class="searchbox-content rowCen">
					<image class="searchIcon" src="../../static/images/community/searchgrey.png" mode=""></image>
					<input @input="txtinput" @focus="txtinput" class="s-txt-ipt" type="text" v-model="searchTxt"
						placeholder="输入商家名、品类或商圈" placeholder-class="s-txt" />
					<view class="searchBtn rowCenCen" @tap="searchShop()">
						<view>搜索</view>
					</view>
				</view>
			</view>
		</view>
		<view class="topbarbox"></view>
		<view class="pageContent-container">
			<!-- 金刚区 -->
			<!-- <view class="classify-container borderBox rowCen" v-if="homeMenu.length>0">
				<scroll-view scroll-x class="class-scroll rowCen">
					<view class="scroll-content">
						<block v-for="(items,index) in homeMenu" :key="index">
							<view class="clas-items colCen" @tap="goUrl(items)">
								<image class="iconPic" :src="items.mpic" mode="aspectFill"></image>
								<view class="items-txt">
									{{items.mname}}
								</view>
							</view>
						</block>
					</view>
				</scroll-view>
			</view> -->
			<view class="bgF padT30 br10 padL20" style="margin: 20rpx 26rpx;">
				<view class="slider_itemslist rowSta">
                    <view class="item colCen" v-for="(item, idx) in topHomeMenu" :key="idx" @click="goUrl(item)">
                        <template v-if="idx<5">
                                <image :src="item.mpic" :lazy-load="true" mode="aspectFit"></image>
                                <view class="desc">{{ item.mname }}</view>
                        </template>
                    </view>
				</view>
				<view class="navslider-box" v-if="homeShowList.length > 0">
					<swiper class="swiper-type swiper-nav"
						:indicator-dots="homeMenu.length > 10 ? true : false" indicator-color="#eaeaea"
						indicator-active-color="#FE3A33" :duration="500" :style="sliderH">
						<swiper-item v-for="(sliderItem, index) in homeShowList" :key="index">
							<view class="slider_itemslist rowSta">
								<view class="item colCen" v-for="(item, idx) in sliderItem" :key="idx" @click="goUrl(item)">
									<image :src="item.mpic" :lazy-load="true" mode="aspectFit"></image>
									<view class="desc">{{ item.mname }}</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<!-- 推荐区 -->
			<view class="recommend-container borderBox" v-if="recommendList.length>0">
				<view class="shadow-content colCen">
					<view class="model-bar rowCen" v-for="(items,index) in recommendList" :key="index">
						<view class="lefticon colCenCen">
							<image class="iconimg" :src="items.icon" mode="aspectFill">
							</image>
							<view class="tipstxt">
								{{items.title}}
							</view>
							<view class="tips-pink rowCenCen">
								<view>{{items.tips}}</view>
							</view>
						</view>

						<view class="right-GoodsContent borderitm rowCen">
							<block v-for="(itm,idx) in items.goodsList" :key="idx" v-if="idx<4">
								<view class="goods-itms colCen" @tap="ceshi(items)">
									<image class="gs-icon" :src="itm.pic" mode="aspectFill"></image>
									<view class="price-txt">
										￥{{itm.price}}
									</view>
								</view>
							</block>
						</view>
					</view>
				</view>
			</view>

			<!-- 美团优选 -->
			<view class="meituan-youxuan borderBox" v-if="youXuan.length>0">
				<view class="backgd-content colCen borderBox">
					<view class="container-title rowCenBet borderBox">
						<view class="left-title-content rowCen">
							<view class="txttitle">
								美团优选
							</view>
							<view class="brownBox rowCenCen">
								<view>次日</view>
							</view>
							<view class="whiteBox rowCenCen">
								<view>自提</view>
							</view>
						</view>

						<view class="right-title-content rowCen">
							<view class="txt">
								<!-- 附近的王梅**下单了 -->
							</view>
						</view>
					</view>

					<view class="goods-content borderBox">
						<view class="white-content rowCenBet">
							<block v-for="(items,index) in youXuan" :key="index">
								<view class="goods-items colCen" @tap="toMiniProgram(items)">
									<image class="goodspic" :src="items.pictUrl" mode="aspectFill"></image>
									<view class="pricebox">
										￥{{items.promotionPrice}}
									</view>
								</view>
							</block>
						</view>
					</view>
				</view>
			</view>

			<view class="bottom-nav-bar borderBox">
			<!-- 	<view class="white-nav-bar borderBox rowCenBet">
					<block v-for="(items,index) in navList" :key="index">
						<view class="nav-items" :class="navCurrent==index?'nav-items-active':''" @tap="navTap(index)">
							{{items.label}}
						</view>
					</block>
				</view> -->
			</view>

			<view v-if="locationInfo">
				<nearbyShop ref="nearbyShop" :searchTxt='searchTxt' v-if="navCurrent==0" :lcInfo='locationInfo'
					:cityId="cityInfo.key"></nearbyShop>
				<mtSelect ref="mtSelect" v-if="navCurrent==1" :lcInfo='locationInfo'></mtSelect>
				<ambitusShop ref="ambitusShop" v-if="navCurrent==2" :lcInfo='locationInfo' :cityId="cityInfo.key">
				</ambitusShop>
			</view>

			<view class="noLocation" v-else>
				{{locaStatus}}
			</view>
		</view>

		<u-picker mode="multiSelector" v-model="ctshow" :range="multiSelector" range-key="value"
			@columnchange="columnProvince" @confirm="selectCity"></u-picker>

		<u-action-sheet :list="actionlist" v-model="actionshow" :cancel-btn="true" @click="actionClick">
		</u-action-sheet>
	</view>
</template>

<!-- 
	版权声明：
			西瓜猪淘客APP导购版本受商标和著作权保护，客户端仅提供学习交流；
			如有部分或全部复制、仿冒、抄袭、盗用、未购买商业版授权商业使用，
			西瓜猪必将追究法律责任；
			法律顾问：易法通 @http://www.yifatong.com/
			@获取许可
			* WeChat：shenlailai6   QQ：212156620   Email： admin.java3.cn -->
			
			
<script>
	import mtSelect from './indexComponents/meituanSelect.vue'
	import ambitusShop from './indexComponents/ambitusShop.vue'
	import nearbyShop from './indexComponents/nearbyShop.vue'
	import getLocation from '../../utils/getLocation.js'
	import drawtab from '../../utils/mineTab.js'
	import utils from '../../utils/utils.js'
	export default {
		components: {
			mtSelect,
			ambitusShop,
			nearbyShop
		},
		data() {
			return {
				searchTxt: '',
				cityInfo: '',
				locationInfo: '',
				navCurrent: 0,
				navList: [{
						label: '附近店铺'
					},
					{
						label: '美团优选'
					}
				],
				locaStatus: '',

				multiSelector: [],
				ctshow: false,
				actionshow: false,
				actionlist: [{
					text: '定位当前位置'
				}, {
					text: '列表选择城市'
				}],

				topHomeMenu: [],
				homeMenu: [],
				homeShowList: [],
				sliderH: '',
				
				youXuan: [],
				recommendList: [],
			}
		},
		watch: {
			homeMenu(nval, oval) {
				let index = 0;
				let arr = []
				while (index < nval.length) {
					// this.homeShowList.push(nval.slice(index, (index += 10)));
					arr.push(nval.slice(index, (index += 10)));
				}
				this.homeShowList = arr
				if (this.homeMenu.length > 5) {
					this.sliderH = 'height:345rpx;';
				} else {
					this.sliderH = 'height:160rpx;';
				}
			},
		},
		onLoad() {
			this.siteInfo()
			this.gethomeMenu()
		},
		onShow() {
			drawtab.nativeView.show()
		},
		onHide() {
			drawtab.nativeView.hide()
		},
		onPullDownRefresh() {
			if (this.locationInfo) {
				//this.getyouXuan()
				this.getrecommendList()
				if (this.navCurrent == 1) {
					this.$refs.mtSelect.getList()
				} else if (this.navCurrent == 0) {
					this.$refs.nearbyShop.getCates()
				} else if (this.navCurrent == 2) {
					this.$refs.ambitusShop.getList()
				}
			} else {
				this.siteInfo()
			}
			this.gethomeMenu()
		},
		methods: {
			openAction() {
				this.actionshow = true
			},
			actionClick(e) {
				//console.log(e);
				if (e == 0) {
					this.siteInfo()
				} else {
					this.getprovince()
				}
			},
			getprovince() {
				this.multiSelector = []
				this.$http.post('mttuangou/provinceAll').then(res => {
					//console.log(res);
					this.multiSelector.push(res)
					this.$http.post('mttuangou/provinceCities', {
						provinceId: res[0].key
					}).then(res => {
					//	console.log(res);
						this.multiSelector.push(res)
						this.ctshow = true
					})
				})
			},

			selectCity(e) {
				if (!e[1]) {
					e.push(0)
				}
				this.cityInfo = this.multiSelector[1][e[1]]
				uni.setStorageSync('cityInfo', this.cityInfo)
				this.$http.post('mttuangou/coordinate', {
					cityName: this.cityInfo.value
				}).then(res => {
					this.locationInfo = res
					uni.setStorageSync('locationInfo', this.locationInfo)
					//this.getyouXuan()
					this.getrecommendList()
					if (this.navCurrent == 1) {
						this.$refs.mtSelect.getList()
					} else if (this.navCurrent == 0) {
						this.$refs.nearbyShop.getCates()
					} else if (this.navCurrent == 2) {
						this.$refs.ambitusShop.getList()
					}
				})
			},

			columnProvince(e) {
			//	console.log(e);
				this.$http.post('mttuangou/provinceCities', {
					provinceId: this.multiSelector[0][e.index].key
				}).then(res => {
				//	console.log(res);
					this.multiSelector.splice(1, 1, res)
				})
			},

			async siteInfo() {
				this.locationInfo = await getLocation(this)
				uni.setStorageSync('locationInfo', this.locationInfo)
				console.log(this.locationInfo, '定位')
				// #ifdef APP-PLUS
				this.$http.post('mttuangou/getCityId', {
					city: this.locationInfo.address.city,
				}).then(res => {
				//	console.log(res);
					this.cityInfo = res
					uni.setStorageSync('cityInfo', this.cityInfo)
					if (this.locationInfo) {
						//this.getyouXuan()
						this.getrecommendList()
						if (this.navCurrent == 1) {
							this.$refs.mtSelect.getList()
						} else if (this.navCurrent == 0) {
							this.$refs.nearbyShop.getCates()
						} else if (this.navCurrent == 2) {
							this.$refs.ambitusShop.getList()
						}
					}
				})
				// #endif
			},
		/* 	getyouXuan() {
				this.$http.post('mtyouxuan/getList', {
					deviceType: getApp().globalData.platform == 'android' ? (getApp().globalData.systemLevel < 10 ?
						'IMEI' : 'OAID') : 'IDFA',
					latitude: this.locationInfo.latitude,
					longitude: this.locationInfo.longitude,
					pageNO: 1,
					pageSize: 8
				}, 'application/json').then(res => {
					uni.stopPullDownRefresh()
					this.youXuan = res
				})
			}, */
			getrecommendList() {
				//console.log(123);
				this.$http.post('mtyouxuan/getPlate', {
					deviceType: getApp().globalData.platform == 'android' ? (getApp().globalData.systemLevel < 10 ?
						'IMEI' : 'OAID') : 'IDFA',
					latitude: this.locationInfo.latitude,
					longitude: this.locationInfo.longitude,
					cityId: this.cityInfo.key,
					pageNO: 1,
					pageSize: 4
				}, 'application/json').then(res => {
					uni.stopPullDownRefresh()
				//	console.log(res, '推荐区');
					this.recommendList = res
				})
			},
			gethomeMenu() {
				this.$http.post('mthomeMenu/getMenuList').then(res => {
					//console.log(res);
					this.homeMenu = res.bottomHomeMenu;
					this.topHomeMenu = res.topHomeMenu;
				})
			},
			txtinput() {
				if (this.navCurrent != 0) {
					this.navCurrent = 0
				}
			},
			ceshi(item) {
				//console.log("---------------------"+JSON.stringify(item))
				// 1拉起微信小程序    0 不拉
				var isAppletJump =  getApp().globalData.appinfo.isAppletJump;
				if(isAppletJump){
					utils.goUrl(item);
					
				}else{
					if(item.activityType == '2'){
						this.$http.post('mthomeMenu/jtk', {
							activityType: item.activityType
						}).then(zhuanlianres => {
					
							plus.runtime.openURL(zhuanlianres.deeplink, res => {
								uni.navigateTo({
									url: '../webView/webView?url=' +(zhuanlianres.longH5 ? zhuanlianres.longH5 : zhuanlianres.h5)
								})
							});
						})
					}else{
						utils.goUrl(item);
					}
				}
			
				
			},
			toMiniProgram(item) {
			//	console.log(item);
				// #ifdef APP-PLUS
				// 1拉起微信小程序    0 不拉
				var isAppletJump =  getApp().globalData.appinfo.isAppletJump;
				if(isAppletJump){
						console.log("==========="+JSON.stringify(item))
					plus.share.getServices(function(res) {
							var sweixin = null;
							for (var i = 0; i < res.length; i++) {
								var t = res[i];
								if (t.id == 'weixin') {
									sweixin = t;
								}
							}
							if (sweixin) {
								sweixin.launchMiniProgram({
									id: 'gh_84b9766b95bc',
									type: 0, //0 正式 1 测试 2 体验  小程序的版本
									path: item.itemWXLinkUrl //这里你要跳的路径，可以传值
								});
							}
						}, function(res) {
							console.log(JSON.stringify(res));
						}); 
				}else{
					plus.runtime.openURL(item.itemDeepLinkUrl, res => {
						//console.log(res);
						uni.navigateTo({
							url: '../webView/webView?url=' + item.itemMiddlePageLinkUrl
						})
					});
				}
			
				// #endif
			/* 	*/
			},
			navTap(index) {
				this.navCurrent = index
			},
			searchShop() {
				this.navCurrent == 0
				if (this.navCurrent == 0) {
					this.$refs.nearbyShop.newData()
				}
			},
			goUrl(info) {
			//	console.log(info);
				utils.goUrl(info)
			}
		},

		onReachBottom() {
			if (this.navCurrent == 1) {
				this.$refs.mtSelect.getNextpage()
			} else if (this.navCurrent == 0) {
				this.$refs.nearbyShop.getNextpage()
			} else if (this.navCurrent == 2) {
				this.$refs.ambitusShop.getNextpage()
			}
		}
	}
</script>

<style lang="scss">
	/deep/.navslider-box {
		width: 100%;
		.swiper-type {
			width: 100%;
		}
		.uni-swiper-dot {
			width: 20rpx;
			height: 6rpx;
			border-radius: none;
		}
	}
	.slider_itemslist {
		width: 100%;
		flex-wrap: wrap;
		
		.item {
			width: 20%;
			margin-bottom: 30rpx;
		
			image {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 10rpx;
			}
		
			.desc {
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
			}
		}
	}
	.community-wrapper {
		width: 100%;

		.topfixed-container {
			width: 100%;
			background-color: #FFFFFF;
			position: fixed;
			left: 0;
			top: 0;
			padding-bottom: 10rpx;
			z-index: 100;
			padding-right: 26rpx;

			.search-bar-container {
				width: 100%;
				height: 90rpx;

				.lft-adrs-content {
					width: 153rpx;

					.adrs-txt {
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
						margin-right: 10rpx;
					}

					.downIcon {
						width: 19rpx;
						height: 11rpx;
					}
				}

				.searchbox-content {
					flex: 1;
					height: 72rpx;
					background: #F8F8F8;
					border-radius: 32rpx;
					padding: 0 20rpx;

					.searchIcon {
						width: 28rpx;
						height: 28rpx;
						margin-right: 20rpx;
					}

					.searchBtn {
						width: 98rpx;
						height: 58rpx;
						background-color: #FDE76D;
						border-radius: 24rpx;
						color: #222222;
						font-size: 26rpx;
					}

					.s-txt-ipt {
						flex: 1;
						color: #222222;
						font-size: 26rpx;
					}

					.s-txt {
						font-size: 26rpx;
						font-weight: 500;
						color: #666666;
					}
				}
			}
		}

		.pageContent-container {
			width: 100%;
			// margin-top: 130rpx;
			margin-top: 120rpx;
            // border:1rpx solid red;

			.classify-container {
				width: 100%;
				height: 340rpx;
				padding: 0 22rpx;
				margin-bottom: 30rpx;
				background-color: #FFFFFF;

				.class-scroll {
					width: 100%;
					height: 320rpx;

					.scroll-content {
						width: 100%;
						height: 320rpx;
						display: flex;
						flex-direction: column;
						flex-wrap: wrap;

						.clas-items {
							margin: 15rpx 20rpx;

							.iconPic {
								width: 80rpx;
								height: 80rpx;
							}

							.items-txt {
								font-size: 24rpx;
								font-weight: 500;
								color: #333333;
								margin-top: 10rpx;
							}
						}
					}
				}
			}


			.recommend-container {
				width: 100%;
				padding: 0 26rpx;
				margin-bottom: 20rpx;

				.shadow-content {
					width: 100%;
					background: #FFFFFF;
					border-radius: 12rpx;

					.model-bar {
						width: 100%;
						height: 200rpx;

						.lefticon {
							width: 130rpx;
							height: 100%;

							.iconimg {
								width: 35rpx;
								height: 38rpx;
							}

							.tipstxt {
								font-size: 24rpx;
								font-weight: bold;
								color: #333333;
								margin: 10rpx 0;
							}

							.tips-pink {
								height: 30rpx;
								background: rgba(255, 0, 44, 0.1);
								border-radius: 13rpx;
								font-size: 20rpx;
								font-weight: 500;
								color: #FF002C;
								padding: 0 9rpx;
							}
						}

						.right-GoodsContent {
							flex: 1;
							height: 100%;
							margin-top: 10rpx;
							padding: 0 4rpx;

							.goods-itms {
								margin: 0 16rpx;

								.gs-icon {
									width: 108rpx;
									height: 108rpx;
									border-radius: 8rpx;
								}

								.price-txt {
									font-size: 24rpx;
									font-weight: bold;
									color: #FF002C;
									margin-top: 10rpx;
								}
							}

							.borderitm {
								border-bottom: 1rpx solid #F2F2F2;
							}
						}
					}
				}
			}

			.meituan-youxuan {
				width: 100%;
				padding: 0 26rpx;
				margin-bottom: 20rpx;

				.backgd-content {
					width: 100%;
					background: linear-gradient(-90deg, #FDF4B1, #FDE76D);
					border-radius: 16rpx;

					.container-title {
						width: 100%;
						height: 80rpx;
						padding: 0 20rpx;

						.left-title-content {
							.txttitle {
								font-size: 32rpx;
								font-weight: bold;
								color: #333333;
								margin-right: 20rpx;
							}

							.brownBox {
								width: 55rpx;
								height: 31rpx;
								background: #C99107;
								border-radius: 4rpx 0px 0px 4rpx;
								font-size: 20rpx;
								font-weight: 500;
								color: #FFFFFF;
							}

							.whiteBox {
								width: 55rpx;
								height: 31rpx;
								background: #FFFFFF;
								border-radius: 0px 4rpx 4rpx 0px;
								font-size: 20rpx;
								font-weight: bold;
								color: #C99107;
							}
						}

						.right-title-content {
							.txt {
								font-size: 20rpx;
								font-weight: 500;
								color: #958532;
							}
						}
					}

					.goods-content {
						width: 100%;
						padding: 0 22rpx;
						margin-bottom: 26rpx;

						.white-content {
							width: 100%;
							flex-wrap: wrap;
							border-radius: 16px;
							background-color: #FFFFFF;

							.goods-items {
								margin: 38rpx 15rpx 25rpx 15rpx;

								.goodspic {
									width: 120rpx;
									height: 120rpx;
									border-radius: 12rpx;
								}

								.pricebox {
									font-size: 24rpx;
									font-weight: bold;
									color: #FF002C;
									margin-top: 10rpx;
								}
							}
						}
					}
				}
			}

			.bottom-nav-bar {
				width: 100%;
				padding: 0 26rpx;

				.white-nav-bar {
					width: 100%;
					height: 80rpx;
					background-color: #FFFFFF;
					border-radius: 16rpx 16rpx 0px 0px;
					padding: 0 110rpx;

					.nav-items {
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
					}

					.nav-items-active {
						color: #FF002C;
					}
				}
			}

			.noLocation {
				font-size: 28rpx;
				font-weight: bold;
				color: #999999;
				margin-top: 30rpx;
			}
		}
	}
</style>
